//******************** attention to rename this function ************************//
.theme-default(theme-default);
//******************** attention to rename this function ************************//

.theme-default(@theme-name) {

  // font family
  //font-family: 微软雅黑 Arial;

  // font color
  @body-font-color: #000000;
  @error-font-color: #ff0000;

  // border color
  @border-color: #c3c3c3;

  // default form & input & select checkbox
  @input-default: #cccccc;

  // background color 01;
  @bg-01: #8654ff;
  // core background 02
  @bg-02: #46baff;
  // auxiliary background 01
  @bg-03: #ffffff;
  // auxiliary background 02
  @bg-04: #8654ff;
  // auxiliary background 03
  @bg-05: #c0d8f3;

  // btn background color 01;
  @btn-bg-01: #6feeee;
  // btn background color 02;
  @btn-bg-02: #6feeee;
  // btn background color 03;
  @btn-bg-03: #6feeee;
  // btn background color 04;
  @btn-bg-04: #6feeee;
  // btn background color 05;
  @btn-bg-05: #6feeee;

  // btn  color 01;
  @btn-color-01: #000000;
  // btn  color 02;
  @btn-color-02: #000000;
  // btn  color 03;
  @btn-color-03: #000000;
  // btn  color 04;
  @btn-color-04: #000000;
  // btn  color 05;
  @btn-color-05: #000000;

  // border style
  @border-style-solid: solid;
  @border-style-dotted: dotted;

  // ui box
  @box-spacing : 15px;
  @box-radius: 5px;

  // max radius
  @max-radius : 10;

  @import "ui-component";

  div, section, article, head, footer, td, ul, li, ol, dl, dt, dd, span, label {
    font-family: 微软雅黑 Arial;
    letter-spacing: 1px;
    font-weight: 300;
  }

  /**--S border style **/
  .generate-border-core
  (5);
  .generate-border-core(@n, @i : 1) when (@i <= @n) {
    .generate-border((@i * 1px));
    .generate-border-core(@n, @i + 1);
  }

  .generate-border(@width) {
    .@{theme-name} .border-@{border-style-solid}-@{width} {
      border: @width @border-style-solid @border-color;
    }
    .@{theme-name} .border-@{border-style-dotted}-@{width} {
      border: @width @border-style-dotted @border-color;
    }

    .@{theme-name} .border-top-@{border-style-solid}-@{width} {
      border-top: @width @border-style-solid @border-color;
    }
    .@{theme-name} .border-top-@{border-style-dotted}-@{width} {
      border-top: @width @border-style-dotted @border-color;
    }
    .@{theme-name} .border-left-@{border-style-solid}-@{width} {
      border-left: @width @border-style-solid @border-color;
    }
    .@{theme-name} .border-left-@{border-style-dotted}-@{width} {
      border-left: @width @border-style-dotted @border-color;
    }
    .@{theme-name} .border-right-@{border-style-solid}-@{width} {
      border-top: @width @border-style-solid @border-color;
    }
    .@{theme-name} .border-right-@{border-style-dotted}-@{width} {
      border-top: @width @border-style-dotted @border-color;
    }
    .@{theme-name} .border-bottom-@{border-style-solid}-@{width} {
      border-top: @width @border-style-solid @border-color;
    }
    .@{theme-name} .border-bottom-@{border-style-dotted}-@{width} {
      border-top: @width @border-style-dotted @border-color;
    }
  }

  .generate-border2();
  .generate-border2() {
    .@{theme-name} .bd {
      border: 1px solid @border-color;
    }
    .@{theme-name} .bt {
      border-top: 1px solid @border-color;
    }
    .@{theme-name} .bl {
      border-left: 1px solid @border-color;
    }
    .@{theme-name} .br {
      border-right: 1px solid @border-color;
    }
    .@{theme-name} .bb {
      border-bottom: 1px solid @border-color;
    }
  }

  /**--E border style **/

  /**--S border radius */
  .generate-border-radius(@max-radius);
  .generate-border-radius(@max , @i : 1) when (@i <= @max) {
    .radius-@{i} {
      border-radius: (@i * 1px);
    }
    .generate-border-radius(@max, @i + 1);
  }

  /**--E border radius */

  /**--S background color */
  .generate-background();
  .generate-background() {
    .@{theme-name} .bg-01 {
      background: @bg-01;
    }
    .@{theme-name} .bg-02 {
      background: @bg-02;
    }
    .@{theme-name} .bg-03 {
      background: @bg-03;
    }
    .@{theme-name} .bg-04 {
      background: @bg-04;
    }
    .@{theme-name} .bg-05 {
      background: @bg-05;
    }
  }

  .@{theme-name} .btn-01 {
    background: @btn-bg-01;
    color: @btn-color-01;
  }

  .@{theme-name} .btn-02 {
    background: @btn-bg-02;
    color: @btn-color-02;
  }

  .@{theme-name} .btn-03 {
    background: @btn-bg-03;
    color: @btn-color-03;
  }

  .@{theme-name} .btn-04 {
    background: @btn-bg-04;
    color: @btn-color-04;
  }

  .@{theme-name} .btn-05 {
    background: @btn-bg-05;
    color: @btn-color-05;
  }

  /**--E background color */

}

